<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>玉米商业信息管理</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <link href="../css/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
    <link href="../css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <!-- orris -->

    <style>

        #page-wrapper
        {
            margin: 0 0 0 0px;
        }
        h1
        {
            font-size: 60px;
        }
    </style>
</head>

<body>

    <div id="wrapper">

        <div id="page-wrapper" class="gray-bg dashbard-1">
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>收入管理</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="index.html">首页</a>
                        </li>
                        <li>
                            <a>财务管理</a>
                        </li>
                        <li class="active">
                            <strong>收入管理</strong>
                        </li>
                    </ol>
                </div>
            </div>
             <!-- 头部导航结束 -->

            <!-- 头部明细 -->
            <div class="row">
                <div class="col-md-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-success pull-right">27号</span>
                            <h5>今日收入（元）</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">￥386,200</h1>
                            <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right">五月</span>
                            <h5>本月收入（元）</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins" >￥80,8000000</h1>
                            <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right">5月</span>
                            <h5>毛利润（元）</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">￥5,800</h1>
                            <div class="stat-percent font-bold text-info">15% <i class="fa fa-level-up"></i></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right">2017</span>
                            <h5>年度收入（元）</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">￥280,800</h1>
                            <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 单据明细 -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active" id="myImg"><a data-toggle="tab" href="#tab-2">图形</a></li>
                            <li class=""><a data-toggle="tab" href="#tab-1"> 列表</a></li>

                        </ul>
                        <div class="tab-content">
                            <!-- 列表展示 -->
                            <div id="tab-1" class="tab-pane ">
                                <div class="panel-body">
                                    <!-- 销售额列表 -->
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="ibox float-e-margins">
                                                <div class="ibox-title">
                                                    <h5>销售额 </h5>
                                                    <div class="ibox-tools">
                                                        <a class="collapse-link">
                                                            <i class="fa fa-chevron-up"></i>
                                                        </a>
                                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                                            <i class="fa fa-wrench"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-user">
                                                            <li><a href="#">Config option 1</a>
                                                            </li>
                                                            <li><a href="#">Config option 2</a>
                                                            </li>
                                                        </ul>
                                                        <a class="close-link">
                                                            <i class="fa fa-times"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="ibox-content">
                                                    <div class="row">
                                                        <div class="col-sm-2 m-b-xs"><select class="input-sm form-control input-s-sm inline">
                                                            <option value="0">总销售额</option>
                                                            <option value="1">欠款金额</option>
                                                            <option value="2">实收金额</option>
                                                        </select>
                                                        </div>
                                                        <div class="col-sm-4 m-b-xs">
                                                            <div data-toggle="buttons" class="btn-group">
                                                                <label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options"> 日 </label>
                                                                <label class="btn btn-sm btn-white active"> <input type="radio" id="option2" name="options"> 周 </label>
                                                                <label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options"> 月 </label>
                                                            </div>
                                                        </div>

                                                        <div class="col-sm-2 m-b-xs">
                                                            <div class="form-group" id="startDate">

                                                                <div class="input-group date">
                                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                                    <input type="text" class="form-control" value="03/04/2017">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!--<div class="col-sm-2 m-b-xs">
                                                            <div class="form-group" id="endDate">

                                                                <div class="input-group date">
                                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" value="03/04/2017">
                                                                </div>
                                                            </div>
                                                        </div>-->

                                                        <!--<div class="form-group" id="datepicker">
                                                            <div class="col-sm-2">
                                                                <div class="input-group date">
                                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input
                                                                        id="form-inp-spc" class="form-control">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="form-group" id="endDatepicker">
                                                            <div class="col-sm-2">
                                                                <div class="input-group date">
                                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input
                                                                         class="form-control">
                                                                </div>
                                                            </div>
                                                        </div>-->

                                                        <div class="col-sm-2">
                                                            <div class="input-group"><input type="text" placeholder="Search" class="input-sm form-control"> <span class="input-group-btn">
                                                            <button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span></div>
                                                        </div>
                                                    </div>
                                                    <div class="table-responsive">
                                                        <table class="table table-striped">
                                                            <thead>
                                                            <tr>
                                                                <th></th>
                                                                <th>订单编号 </th>
                                                                <th>订单日期</th>
                                                                <th>经手人</th>
                                                                <th>实收金额（元） </th>
                                                                <th>状态</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr>
                                                                <td>1</td>
                                                                <td>Project<small>This is example of project</small></td>
                                                                <td><span class="pie">0.52/1.561</span></td>
                                                                <td>20%</td>
                                                                <td>Jul 14, 2013</td>
                                                                <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                            </tr>
                                                            <tr>
                                                                <td>2</td>
                                                                <td>Alpha project</td>
                                                                <td><span class="pie">6,9</span></td>
                                                                <td>40%</td>
                                                                <td>Jul 16, 2013</td>
                                                                <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                            </tr>
                                                            <tr>
                                                                <td>3</td>
                                                                <td>Betha project</td>
                                                                <td><span class="pie">3,1</span></td>
                                                                <td>75%</td>
                                                                <td>Jul 18, 2013</td>
                                                                <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                            </tr>
                                                            <tr>
                                                                <td>4</td>
                                                                <td>Gamma project</td>
                                                                <td><span class="pie">4,9</span></td>
                                                                <td>18%</td>
                                                                <td>Jul 22, 2013</td>
                                                                <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                            </tr>
                                                            <tr>
                                                                <td></td>
                                                                <td></td>
                                                                <td></td>
                                                                <td></td>
                                                                <td>总计：50000</td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 图形展示 -->
                            <div id="tab-2" class="tab-pane active">
                                <div class="panel-body">
                                    <!-- 柱状图 -->
                                    <div class="animated fadeInRight">

                                        <div class="col-lg-6">
                                            <div class="ibox float-e-margins">
                                                <div class="ibox-title">
                                                    <!--<h5>Bar Chart Example</h5>-->
                                                    <h5>近六个月收入</h5>
                                                    <div ibox-tools></div>
                                                </div>
                                                <div class="ibox-content">
                                                    <div>
                                                        <canvas id="barChart" height="140"></canvas>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        </div>



    <!-- Mainly scripts -->
    <script src="../js/jquery-2.1.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>



    <!-- Peity -->
    <script src="../js/plugins/peity/jquery.peity.min.js"></script>

    <!-- Flot -->
    <!--<script src="../js/plugins/flot/jquery.flot.js"></script>-->

    <!-- 日期插件 -->
    <script src="../js/plugins/datapicker/bootstrap-datepicker.js"></script>

    <!-- Custom and plugin javascript -->
    <script src="../js/inspinia.js"></script>
    <script src="../js/plugins/pace/pace.min.js"></script>

    <!-- iCheck -->
    <script src="../js/plugins/iCheck/icheck.min.js"></script>

    <!-- Peity -->
    <script src="../js/demo/peity-demo.js"></script>

    <!-- Date range use moment.js same as full calendar plugin -->
    <script src="../js/plugins/fullcalendar/moment.min.js"></script>

    <!-- Date range picker -->
    <script src="../js/plugins/daterangepicker/daterangepicker.js"></script>

    <!-- ChartJS-->
    <script src="../js/plugins/chartJs/Chart.min.js"></script>

<script>

    $(function(){


        var barData = {
            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data: [5, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: "My Second dataset",
                    fillColor: "rgba(26,179,148,0.5)",
                    strokeColor: "rgba(26,179,148,0.8)",
                    highlightFill: "rgba(26,179,148,0.75)",
                    highlightStroke: "rgba(26,179,148,1)",
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        };

        var barOptions = {
            scaleBeginAtZero: true,
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            barShowStroke: true,
            barStrokeWidth: 2,
            barValueSpacing: 5,
            barDatasetSpacing: 1,
            responsive: true,
        }


        var ctx = document.getElementById("barChart").getContext("2d");
        var myNewChart = new Chart(ctx).Bar(barData, barOptions);

    });

    $('#startDate .input-group.date').datepicker({
        language: "cn",
        todayBtn: "linked",
        todayHighlight: true,
        keyboardNavigation: false,
        format: "yyyy-MM-dd",
        pickerPosition: "bottom-right",
        autoclose: true
    });
</script>


</body>

</html>
